<template>
  <div ref="wrapper" class="alarm-marquee pointer-auto pointer relative height-change">
    <div v-if="marqueeList.length" ref="marquee" class="absolute marqueeBox" :style="position">
      <div ref="marqueeContent" class="flex align-center">
        <div
          v-for="(item, index) in showList"
          :key="index"
          class="alarm-item"
          :style="item.alarmLevel === 1 ? { color: getTheme === 'dark-theme'?'#F07D7D':getColor(item.alarmLevel) } : ''"
          @click="$emit('locateAlarm', {...item,isAlarm: true})"
        >
          <span
            class="alarm-label mr-5"
            :class="item.alarmLevel === 3?'level3':''"
            :style="{ background: getColor(item.alarmLevel) }"
          >
            {{ dictMap['ALARM_LEVEL'][item.alarmLevel] }}</span>
          <span class="mr-5">{{ getReion(item) }}</span>
          <span class="mr-5">{{ item.device ? item.device.deviceName : item.deviceId }}</span>
          <span class="mr-5">{{ $t('ALARM_AT', { msg: item.startTime }) }}</span>
          <span class="mr-5">{{
            $t('ALARM_TRIGGERED', { msg: dictMap['ALARM_TYPE'][item.alarmType] })
          }}</span>
        </div>
      </div>
    </div>
    <div v-else class="text-color text-center font-small">
      {{ $t('NO_ALARM_INFORMATION') }}
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { getParentsById, defaultAlarmColor } from '@/utils/common'

  import HomeApi from '@/api/oen/HomeApi'

  export default {
    data() {
      return {
        distance: 0,
        alarmList: [],
        position: {
          left: 0,
          top: 0
        }
      }
    },
    computed: {
      ...mapGetters(['marqueeList', 'dictMap', 'regionTree', 'getTheme']),
      showList() {
        const arr = this.marqueeList.slice(0, 50)
        return arr
      }
    },
    watch: {
      marqueeList: {
        handler(newVal) {
          if (this.marqueeList.length !== 0) {
            this.$nextTick(() => {
              this.setMarquee()
            })
          }
        },
        immediate: true,
        deep: true
      }
    },
    created() {
      this.getData()
    },
    activated() {
      this.getData()
    },
    deactivated() {
      this.$store.commit('SET_MARQUEEN_LIST', [])
    },
    methods: {
      getData() {
        HomeApi.alarmRecordHomeList({ isAlarm: true }).then(res => {
          res = res || []
          res
            .sort((a, b) => {
              return b.startTime - a.startTime
            })
            .sort((a, b) => {
              return a.alarmLevel - b.alarmLevel
            })
          this.$store.commit('SET_MARQUEEN_LIST', res)
        }).catch(err => {
          console.log(err)
        })
      },
      getReion(data) {
        const regionList = data.regionId
          ? (getParentsById(this.regionTree, data.regionId, 'regionId') || []).reverse()
          : []
        return regionList.map(i => i.regionName).join('/')
      },
      setMarquee() {
        const marqueeContent = this.$refs.marqueeContent
        if (!marqueeContent) return
        const contentWidth = marqueeContent.getBoundingClientRect().width
        const bodyWidth = document.body.clientWidth
        this.position = {
          left: 0,
          top: 0
        }
        const time = parseInt((this.showList.length / 10) * 120) // 计算10条告警需要滚动120s
        let transTime = time
        let transWidth = contentWidth
        if (bodyWidth > contentWidth) {
          transWidth = bodyWidth
          transTime = parseInt((bodyWidth / contentWidth) * time)
          this.position = {
            right: 0,
            top: 0
          }
        }
        this.$nextTick(() => {
          document.documentElement.style.setProperty('--marqueeWidth', -transWidth + 'px')
          document.documentElement.style.setProperty('--margueeTime', transTime + 's')
          this.$refs.marquee.classList.value = 'absolute'
          setTimeout(() => {
            this.$refs.marquee.classList.value = 'absolute marqueeBox'
          }, 100)
        })
      },
      getColor(level) {
        return defaultAlarmColor[level]
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '@/assets/css/mixin.module.scss';

  :root {
    --marqueeWidth: 0,
      --margueeTime:120s
  }

  .marqueeBox {
    animation: myAnimation var(--margueeTime) linear infinite;
  }

  .alarm-marquee {
    margin-top: 5px;
    height: 25px;
    line-height: 25px;
    overflow: hidden;

    @include themeify {
      background-color: themed('homeAlarmBg');
    }
  }

  .alarm-item {
    margin-right: 50px;
    display: inline-block;
    font-size: 12px;
    // white-space: nowrap;
    white-space: pre;

    @include themeify {
      color: themed('textColor');
    }

    .alarm-label {
      padding: 2px 5px;
      border-radius: 4px;
      color: #fff;
      &.level3{
        color:rgba(42, 42, 42, 1)
      }
    }
  }

  @keyframes myAnimation {
    0% {
      transform: translateX(0px);
    }

    100% {
      transform: translateX(var(--marqueeWidth));
    }

  }
</style>
